<template>
  <el-dialog
   :append-to-body="true"
   :visible.sync="visible"
    width="1024px"
    title="表格数据选择"
  >
    <el-card shadow="never" class="mb20">
      <el-row>
        <el-col>
          <label class="radio-label">搜索：</label>
          <el-input v-model="listQuery.keywords" clearable placeholder="关键字" style="width: 200px;" class="filter-item" @input="handleFilter" />
        </el-col>
      </el-row>
    </el-card>
    <el-table 
    max-height="480px"
    :data="filterList" 
    v-loading="listLoading"
    element-loading-text="Loading"
    border
    fit
    stripe
    @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="(row, index) => { // 把已选择的行置灰
          if (row.selected) return false
          else return true
        }">
      </el-table-column>
      <el-table-column 
      v-for="(item, index) in columns" :key="index" 
      sortable
      size="small" 
      :label="item.label" 
      :prop="item.prop" 
      :show-overflow-tooltip="item.showOverflowToolti === false ? false : true"
      v-if="item.visible === false ? false : true"
      :type="item.type || undefined" 
      >
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="fetchList" />
    <div slot="footer" style="text-align: center;">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { calculateValue } from '@/api/workflow/form/index'
import enums from '@/views/workflow/utils/enum'
import Pagination from '@/views/workflow/components/Pagination'
import moment from 'moment'

export default {
  components: { Pagination },
  data() {
    return {
      visible: false,
      fieldName: '',
      columns: [],
      optionValueType: '',
      optionValueData: '',
      formData: null,
      tabData: [],
      callback: null,
      multipleSelection: null,
      total: 0,
      listQuery: {
        keywords: '',
        pageNo: 1,
        pageSize: 10
      },
      list: [],
      filterList: [],
      listLoading: false
    }
  },
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {
    async show(fieldName, columns, optionValueType, optionValueData, formData, tabData, callback) { 
      // fieldName：组件对应的data字段，tabData：表格已选择和添加的数据
      this.fieldName = fieldName
      this.columns = columns ? JSON.parse(columns) : []
      this.optionValueType = optionValueType
      this.optionValueData = optionValueData.replace(/[\r\n]/g, '') // 换行
      this.formData = formData
      this.tabData = tabData
      this.callback = callback
      this.visible = true
      this.listQuery = {
        keywords: '',
        pageNo: 1,
        pageSize: 10
      }
      this.calculateValue()
    },
    async calculateValue() {
      this.list = null
      if (!this.optionValueType || !this.optionValueData) return
      this.listLoading = true
      const params = {
        valueType: Object.keys(enums.VALUE_TYPE)[6],// SQL_MAP_LIST,
        valueData: this.optionValueData,
        formData: JSON.stringify(this.formData)
      }
      calculateValue(params).then(res => {
        this.list = res ? res.data : []
        this.list.map((item, index) => {
          if (item.id) { // 已选择的行标识为已选择，用于把复选框置灰
            if (item.id && this.tabData && this.tabData.length) {
              const selection = this.tabData.filter(select => {
                if (select.id === item.id) {

                }
              })
              if (selection && selection.length) {
                item.selected = true
              }
            }
          }
        })
        this.total = this.list.length
        this.handleFilter()
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery = {
        keywords: this.listQuery.keywords,
        pageNo: 1,
        pageSize: 10
      }
      this.fetchList()
    },
    fetchList() {
      let list = []
      if (this.listQuery.keywords.trim() && this.listQuery.keywords.trim().length) {
        list = this.list.filter( item => {
          const finded = Object.keys(item).find(col => {
            return (item[col] + '').indexOf(this.listQuery.keywords.trim()) >= 0
          })
          if (finded) return true
        })
      } else {
        list = this.list
      }
      this.total = list.length
      this.filterList = list.filter((item, index) => {
        const begin = (this.listQuery.pageNo - 1) * this.listQuery.pageSize
        const end = this.listQuery.pageNo * this.listQuery.pageSize 
        if (index >= begin && index < end ) return true
        return false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handelConfirm() {
      this.visible = false
      this.$emit('callbackTabDataSelected', this.fieldName, this.multipleSelection, this.callback)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
